<!DOCTYPE html>
<html>
<head>
    <title>实时日志查看器</title>
    <meta charset="UTF-8">
    <style>
        .container {
            width: 80%;
            margin: 20px auto;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        #logContent {
            width: 100%;
            height: 500px;
            background-color: #000;
            color: #00ff00;
            font-family: monospace;
            padding: 10px;
            overflow-y: auto;
            border: none;
            margin-top: 20px;
            white-space: pre-wrap;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .buttons {
            display: flex;
            gap: 10px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .log-line {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>实时日志查看器</h1>
            <div class="buttons">
                <button onclick="toggleAutoScroll()" id="scrollButton">停止自动滚动</button>
                <button onclick="toggleConnection()" id="connectionButton">断开连接</button>
            </div>
        </div>
        <div id="logContent"></div>
    </div>

    <script>
        let autoScroll = true;
        let ws = null;
        const logContent = document.getElementById('logContent');
        function connect() {
            ws = new WebSocket('ws://localhost:8077/ws-logs?filePath=chat.log');
            ws.onopen = function() {
                document.getElementById('connectionButton').textContent = '断开连接';
                console.log('WebSocket连接已建立');
            };
            
            ws.onmessage = function(event) {
                appendLogs([event.data]);
            };
            
            ws.onclose = function() {
                console.log('WebSocket连接已关闭');
                document.getElementById('connectionButton').textContent = '连接';
            };
            
            ws.onerror = function(error) {
                console.error('WebSocket错误:', error);
            };
        }

        function disconnect() {
            if (ws !== null) {
                ws.close();
                ws = null;
            }
        }

        function toggleConnection() {
            if (ws !== null && ws.readyState === WebSocket.OPEN) {
                disconnect();
            } else {
                connect();
            }
        }

        function toggleAutoScroll() {
            autoScroll = !autoScroll;
            document.getElementById('scrollButton').textContent = 
                autoScroll ? '停止自动滚动' : '开始自动滚动';
        }

        function appendLogs(newLines) {
            newLines.forEach(line => {
                const p = document.createElement('p');
                p.className = 'log-line';
                p.textContent = line;
                logContent.appendChild(p);
            });

            if (autoScroll) {
                logContent.scrollTop = logContent.scrollHeight;
            }
        }

        // 页面加载时自动连接
        connect();
    </script>
</body>
</html> 